<template>
  <div>
    <json-editor ref="editor" :json="listConfig" :options="listJsonEditorOptions" />
  </div>
</template>

<script>
import JsonEditor from '@/components/JsonEditor/json-editor'
import { saveData, getMenuConfig } from '@/api/menu'

var _this
export default {
  name: 'ListConfig',
  components: { JsonEditor },
  props: {
    menuId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      queryBtnDialog: false,
      listConfig: this.listConfigTemp(),
      listJsonEditorOptions: {
        mode: 'code'
      }
    }
  },
  watch: {
    menuId() {
      this.initConfig()
    }
  },
  created() {
    _this = this
    this.initConfig()
  },
  methods: {
    initConfig() {
      getMenuConfig(this.menuId).then(res => {
        const { data } = res
        _this.listConfig = (data && data.listConfig && JSON.parse(data.listConfig)) || JSON.parse(this.listConfigTemp())
      })
    },
    addQueryBtn() {

    },
    listConfigTemp() {
      return `
        {
          "queryOptions": {
            "btns": [
              {
                "type": "query"
              }
            ],
            "cols": [
              {
                "field": "",
                "type": "input",
                "el": {
                  "type": "text"
                },
                "title": ""
              }
            ]
          },
          "toolOptions": {
            "btns": [
              {
                "btnType": "add"
              },
              {
                "btnType": "delete",
                "request": {
                  "url": "",
                  "data": {
                    "id": "rowField"
                  }
                }
              }
            ]
          },
          "tableOptions": {
            "url": "",
            "page": true,
            "selection": true,
            "cols": [
              {
                "field": "",
                "title": ""
              },
              {
                "type": "btns",
                "title": "操作",
                "width": 200,
                "btns": [
                  {
                    "title": "修改",
                    "permission": "",
                    "btnType": "update",
                    "type": "primary",
                    "request": {
                      "url": ""
                    }
                  },
                  {
                    "title": "删除",
                    "permission": "",
                    "btnType": "delete",
                    "type": "danger",
                    "request": {
                      "url": ""
                    }
                  }
                ]
              }
            ]
          }
        }
      `
    },
    save() {
      try {
        this.listConfig = this.$refs.editor.editor.get()
      } catch (e) {
        this.$message.error('保存失败，请检查json格式')
        return
      }
      saveData({
        id: this.menuId,
        listConfig: JSON.stringify(this.listConfig)
      }).then(res => {
        _this.$emit('save-callback')
      })
    }
  }
}
</script>

<style>
  .h3-title {
    border-left: 5px solid #0092EE;padding-left: 10px
  }
  .el-dialog__body {
    padding: 0px 20px;
  }
</style>
